<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.versionName')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="versionName">
              <a-input v-model="model.versionName" :placeholder="$t('common.form.rule.input', {label: $t('columns.versionName')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.versionCode')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="versionCode">
              <a-input-number v-model="model.versionCode" :placeholder="$t('common.form.rule.input', {label: $t('columns.versionCode')})" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.upgradeContent')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upgradeContent">
              <a-textarea v-model="model.upgradeContent" rows="4" :placeholder="$t('common.form.rule.input', {label: $t('columns.upgradeContent')})" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.forceUpdate')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="forceUpdate">
              <a-select v-model="model.forceUpdate" :placeholder="$t('common.form.rule.select', {label: $t('columns.forceUpdate')})">
                <a-select-option  value="0"> 否</a-select-option>
                <a-select-option  value="1"> 是</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.pkgType')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pkgType">
              <a-select v-model="model.pkgType" :placeholder="$t('common.form.rule.select', {label: $t('columns.pkgType')})">
                <a-select-option  :value="item.value" :key="item.key" v-for="item in appPkgTypeDict">{{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.url')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="url">
              <a-input v-if="model.pkgType==3"  v-model="model.url" :placeholder="$t('common.form.rule.input', {label: $t('columns.url')})" />
              <j-upload v-else :text="$t('common.form.upload')" multiple="false" v-model="model.url" ></j-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<i18n>
  {
    "zh-CN": {
      "columns": {
        "versionName": "版本名称",
        "versionCode": "版本编号",
        "upgradeContent": "版本说明",
        "forceUpdate": "是否强制更新",
        "pkgType": "应用包类型",
        "url": "链接"
      }
    },
    "en-US": {
      "columns": {
        "versionName": "Version Name",
        "versionCode": "Version Number",
        "upgradeContent": "Release Note",
        "forceUpdate": "Mandatory update",
        "pkgType": "Package Type",
        "url": "Link"
      }
    },
    "fr-FR": {
      "columns": {
        "versionName": "Nom de la version",
        "versionCode": "Numéro de version",
        "upgradeContent": "Note de libération",
        "forceUpdate": "Mise à jour forcée",
        "pkgType": "Types de paquets",
        "url": "Liens"
      }
    }
  }
</i18n>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'AppUpgradeForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/app/upgrade/add",
          edit: "/app/upgrade/edit",
          queryById: "/app/upgrade/queryById"
        },
        appPkgTypeDict:[],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      isUpload(){
        if(this.model.appType === '1' && (this.model.pkgType === '1' || this.model.pkgType === '2') ){
          return true;
        }else{
          return false;
        }
      }
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.initDict();
    },
    methods: {
      async initDict(){
        this.appPkgTypeDict = await this.getDictList("app_pkg_type_dict");
      },
      add (clientId) {
        this.modelDefault.clientId = clientId;
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      async getDictList(dictKey){
        const res = await getAction(`/app/enum-dict/${dictKey}`);
        if(res.success){
          return res.result;
        }
        return [];
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>